<template>
  <div>
    <p class="info">放款明细</p>
    <a-row class="auto">
      <a-col :span="6">承诺金额：{{ moneyType(loanPrincipal) }}</a-col>
      <a-col :span="6">放款总额：{{ moneyType(NZD || CAD || 0) }}</a-col>
      <a-col :span="6">可放余额：{{ moneyType(balance) }}</a-col>
      <a-col :span="6">货币：{{ currency }}</a-col>
    </a-row>
    <a-table rowKey="id" :columns="loanColmuns" :data-source="loanData" :pagination="loanPage">
      <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
      <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
    </a-table>
    <p class="info">还款明细</p>
    <a-row class="auto">
      <a-col :span="6">放款总额：{{ moneyType(totalLending || 0) }}</a-col>
      <a-col :span="6">还款总额：{{ moneyType(totalRepay) || 0 }}</a-col>
      <a-col :span="6">其余还款总额：{{ moneyType(other) }}</a-col>
    </a-row>
    <a-row class="auto">
      <a-col :span="6">本金还款总额：{{ moneyType(repayPrincipal) }}</a-col>
      <a-col :span="6">利息还款总额：{{ moneyType(interest) }}</a-col>
    </a-row>
    <a-table rowKey="repayDate" :columns="repayColmuns" :data-source="repayData">
      <span slot="repayDate" slot-scope="repayDate"> {{ humanizeDate(repayDate) }}</span>
      <span slot="total" slot-scope="total"> {{ moneyType(total) }}</span>
      <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
      <span slot="interest" slot-scope="interest"> {{ moneyType(interest) }}</span>
      <span slot="linefee" slot-scope="linefee"> {{ moneyType(linefee) }}</span>
      <span slot="other" slot-scope="other"> {{ moneyType(other) }}</span>
      <span slot="tax" slot-scope="tax"> {{ moneyType(tax) }}</span>
    </a-table>
  </div>
</template>
<script>
import { getRepayDeatail, getWithdraw } from '@/api/common'
import moment from 'moment'
export default {
  name: 'projectProgress',
  data() {
    return {
      loanPrincipal: '',
      NZD: '',
      CAD: '',
      currency: '',
      balance: 0,
      totalLending: '',
      totalRepay: '',
      other: '',
      repayPrincipal: '',
      interest: '',
      loanColmuns: [
        { title: '阶段', dataIndex: 'stage', key: 'stage' },
        { title: '金额', dataIndex: 'amount', key: 'amount', scopedSlots: { customRender: 'amount' } },
        { title: '提款日期', dataIndex: 'date', key: 'date', scopedSlots: { customRender: 'date' } }
      ],
      loanData: [],
      repayColmuns: [
        { title: '还款日期', dataIndex: 'repayDate', key: 'repayDate', scopedSlots: { customRender: 'repayDate' } },
        { title: '总金额', dataIndex: 'total', key: 'total', scopedSlots: { customRender: 'total' } },
        { title: '本金还款', dataIndex: 'principal', key: 'principal', scopedSlots: { customRender: 'principal' } },
        { title: '利息还款', dataIndex: 'interest', key: 'interest', scopedSlots: { customRender: 'interest' } },
        { title: '贷款期限费还款', dataIndex: 'linefee', key: 'linefee', scopedSlots: { customRender: 'linefee' } },
        { title: '其他收入还款', dataIndex: 'other', key: 'other', scopedSlots: { customRender: 'other' } },
        { title: '税款', dataIndex: 'levyIssuer', key: 'levyIssuer' },
        { title: '税款金额', dataIndex: 'tax', key: 'tax', scopedSlots: { customRender: 'tax' } }
      ],
      repayData: [],
      loanPage: {
        total: 1,
        pageSize: 5,
        onChange: this.getLoan
      }
      // repayPage: {
      //   total: 1,
      //   pageSize: 5,
      //   onChange: this.getRepay
      // }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.getLoan()
      await this.getRepay()
    },
    async getLoan(page = 1) {
      const _form = {
        projectId: this.$route.query.id,
        page,
        limit: this.loanPage.pageSize,
        status: 2
      }
      const res = await getWithdraw(_form)
      const data = res.result.data
      this.NZD = data.NZD ? data.NZD : 0
      this.CAD = data.CAD ? data.CAD : 0
      this.loanPrincipal = data.principal
      if (data.principal && data.NZD) {
        this.balance = data.principal - data.NZD
        this.totalLending = data.NZD
      } else if (data.principal && data.CAD) {
        this.balance = data.principal - data.CAD
        this.totalLending = data.CAD
      }
      this.currency = data.projectCurrency
      this.loanPage.total = data.total
      this.loanData = data.list.map((el, i) => {
        el.index = i
        return el
      })
    },
    async getRepay(page = 1) {
      const _form = {
        projectId: this.$route.query.id,
        page,
        limit: 9999
      }
      const res = await getRepayDeatail(_form)
      const data = res.result.data
      // this.totalLending = data.totalLending
      this.totalRepay = data.totalRepay
      // this.other = data.other
      console.log(this.totalLending)
      if (this.totalLending) {
        this.other = this.totalLending - data.totalRepay
      }
      this.repayPrincipal = data.principal
      this.interest = data.interest
      // this.repayPage.total = data.total
      this.repayData = data.list.map((el, i) => {
        el.index = i
        return el
      })
    },
    humanizeDate(v) {
      return moment(v, 'X').format('YYYY-MM-DD') || '--'
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  }
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 25px;
  /* margin-left: 50px; */
  margin: 20px 0;
  margin-left: 50px;
}
.auto {
  margin-left: 60px;
  margin-bottom: 30px;
}
</style>
